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Abstract 

We present the design of a new social bookmark manager, named GalViz, as part of the interface of 
the GiveALink system. Unlike the interfaces of traditional social tagging tools, which usually display 
information in a list view, GalViz visualizes tags, resources, social links, and social context in an inter- 
active network, combined with the tag cloud. Evaluations through a scenario case study and log analysis 
provide evidence of the effectiveness of our design. 
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1 Introduction 

Social tagging is a flexible and powerful way to assist users who collaboratively organize and share Web 
resources, as is widely done in many popular Web 2.0 applications. Various kinds of online resources can 
be tagged, reflecting user interests and making such resources more easily accessible to the public. The 
basic relationship in social tagging is defined by the triple, a tripartite combination of a user, a tag and 
a resource. To clearly display and manage a large number of triples is a pretty hard problem, since they 
involve complicated relationships among objects of three different types. 

Current social bookmark managers display collected resources in simple list views, distributed across 
multiple pages. Such a linear display of resources neglects contextual information and weakens the rela- 
tionships between resources and tags. Socio-semantic connections among users through shared annotations 
driven by common interests are hidden, since most existing systems completely separate the personal and 
global views. Semantic relationships among related tags and among related resources are deemphasized as 
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Figure 1: Interfaces of existing social bookmark managers: (a) Delicious.com (b) Flickr (c) Firefox Book- 
mark Manager. 

well. Our design aims to ameliorate these problems for facilitating the management of complex relationships 
hidden in the social annotations. In particular, the design adds value to the user experience by visualizing 
tripartite relationships as networks. 

2 Motivation 

Social tagging collections, also known as social bookmarks or folksonomies, are generated by spontaneous 
behavior of users, helping people manage and organize their resources lTT5l . Existing social tagging sites 
usually incorporate components such as resource lists assisted with tag lists, tag clouds and hierarchical 
clusterings. However, each display has deficiency limiting its functionality and usability. The imperfection 
of current systems encourages us to design and develop a better alternative application. 

List View: List views are widely adopted for displaying a group of items of the same type. The interface 
of Delicious, as an example, consists of a list of resources and a list of all tags (Fig. [T^). The resource list 
occupies most space of the page, emphasized as the main content. Tags are crowd-sourced keywords for 
indexing resources, so the tag list is treated as an auxiliary sidebar. In this case, resources and tripartite re- 
lationships are displayed linearly. List views sequentially present the resources according to a certain order, 
hiding the links among resources, other similar resources and semantically related tags. Key contextual in- 
formation, such as similar sites, people who have interests in it, and their collections, could be very valuable 
for fostering a better understanding of the site and the exploration of other relevant and interesting objects; 
but it is missing. 

Tag Cloud: The tag cloud is a visual depiction of tags in the whole collection to facilitate tag browsing 
(Fig.[lJ>). Tags are arranged in alphabetical order; font sizes and colors are configured to highlight the most 




popular ones. Tag clouds provide users with a global view to learn which tags are used by most people, 
but they possess several disadvantages too. Flat tag clouds are not sufficient to provide a semantic, rich 
and multidimensional browsing experience over large tagging spaces, due to their inefficient navigations, 
downgrading of alternative views, and lack of emphasis on the semantic relationships ifTTlPTTI . Tag clouds 
obscure useful information by having a strong bias towards very popular tags [[71[T0|]. They usually don't 
have enough space to contain all the tags, so a portion of resources still remain inaccessible through the tag 
clouds iflOl . 

Browser Bookmarks: The hierarchical display of tags is naturally embedded in bookmark managers 
of Web browsers (Fig. [[£). The browser tagging system is designed to be very similar to a file explorer, 
where tags are organized in a folder-like hierarchical structure. Resource categorization is restricted by 
the structure of tags, and only the child-parent relations get apparent. Therefore, when the collections 
of bookmarks become larger, it is hard for users to efficiently find a specific resource or discover related 
items lfT6l . Without support for cross references, each resource instance can only belong to one folder. 
Although multiple copies of the same resource can be assigned to different tags, they are distinct instances, 
leading to duplication and inconsistency. 

3 Related Work 

There is sparse literature on the design principles of social tagging tools ||7J|9l|20]|. Some work has been done 
on building hierarchy structure from the social tagging to uncover the hidden child-parent semantics |4l[T9l. 
Visualization, as a powerful type of social bookmarking tool, has been studied and utilized in several existing 
designs. Visualization of hyperlinks between Web pages was adopted to enhance adaptive navigation ED . 
Cluster Map, a social bookmark visualization tool, highlighted the relationships among users and bookmarks 
to identify tag and community structures 021 • Unlike ClusterMap, GalViz, is designed to emphasize the 
semantic relationships between tags and resources to help users manage existing resources and discover new 
ones. Besides, the graphical interface was shown to be useful for distributed collaborations and interactions 
on social bookmarking J6j. Graphical visualization of concept networks was integrated into several Web 
applications as an innovative interactive user interface (HO. Most of such existing applications display 
context of items of the same type, but GalViz is able to provide the visualization of heterogenous networks 

3 



among two different objects, tags and resources. 

GiveALink . org] as a research-oriented social tagging platform, broadly examines several aspects of 
social tagging to foster the construction and applications of socially driven semantic annotation networks. 
Previous research includes the design of effective similarity relationships lfT4l . social spam detection lfl"3l. 
and social tagging games as incentive for collecting high-quality annotations ll22l . Former work in GiveA- 
Link on exploratory navigation interfaces [ 8 ] and bookmark management ifTHTl have significant influence on 
the new design presented in the paper. 

4 Design Goals 

GalViz is an innovative bookmark management tool in the GiveALink system (Fig. [2]). We aimed to achieve 
several design goals, to help overcome the weakness of existing systems and improve user experience. 
Network display, contextual maps, and social relationships are three core concepts. 

4.1 Facilitate Annotation Management with Visualization 

GalViz visualizes personal bookmarks in an interactive network. Each node represents a Web resource or a 
tag; related objects are connected. The default network is centered at selected tags, and gets expanded by 
relevant triples. It is easier to interpret than pure text 0. Furthermore, users only need to concentrate on 
a small area of the visualization, and therefore they can quickly spot the target node by the text or favicon. 
The network provides an interactive way to easily edit or remove any node through a contextual menu. The 
menu shows different options according to the characteristics of the node: whether it is a resource or a tag, 
and whether it belongs to the user's personal collection. Dragging and dropping nodes create operation 
shortcuts. A GalViz bookmarklet allows users to easily add new resources and view their semantic context. 

4.2 Provide Contextual Maps 

Currently, neither browsers nor popular social tagging sites visualizes a page's semantic context beyond 
its content. Therefore, when users need to tell what a page is about, they learn based on the information 
inside the page itself. To improve this, GalViz strives to provide valued and helpful knowledge by exposing 
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Figure 2: Implementation of GalViz: (a) Choose from two modes, either the traditional list view or the 
network visualization, (b) Tag cloud of all personal tags; the font size of a tag is proportional to its popularity, 
(c) A switch between the personal view and the social view. The social view displays additional relevant 
resources and tags based on other people's collections. The local items are green nodes, and the global items 
are purple ones, (d) The filter allows one to expand available resources in the network with more related 
tags, (e) Visualization of tags and resources, (f) Contextual menu of a node. The sample menu is for a local 
resource, so the user has full control over it, including editing the title, changing the tags, or removing it. 
If the resource doesn't belong to the user, she has to add it to her local collection prior to making further 
changes. 

links with correlated tags and resources. Users are therefore provided with contextual maps of semantic 
relationships of a tag or Web page in terms of related tags and pages. Users can use such a map as an 
alternative channel to understand the content and context of the target, as well as to navigate the Web by 
visiting or exploring related objects. 

4.3 Highlight Social Relationships 

In social tagging systems, no matter whether users communicate directly, they are always potentially con- 
nected by shared interests in certain resources or similar agreements on the resources' descriptions. One 
limitation of the current interface [D is that personal resources and the global repository are completely 
separated, and consequently users cannot easily discover their social connections with others. People have 
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different views of same resources, so learning others' annotations can help improve one's understanding 
and optimize one's collection. GalViz brings the idea of social view instead of global view. The social view 
expands the local (personal) resources and tags of a user with globally related triples, making it easier to 
find out what other people view as similar objects. 

4.4 Do Not Overwhelm Users with Information 

Information overload is a common problem faced by many crowdsourcing sites. Once a large group of users 
get into the system and contribute to the knowledge repository, it is impossible for anyone to browse every 
piece of information. Therefore, customization of the results becomes necessary. To avoid overwhelming 
users, we propose a set of content filters in the design to limit the network expansion, and to switch between 
personal and social view. 

5 Implementation 

GalViz incorporates two styles of browsing, the list mode and the visualization mode, as well as a book- 
marklet (Fig. [3ja)) gadget helping add new resources. 

Visualization: The visualization of bookmarks as a network with rich contextual information is the core 
design of GalViz- As Fig. [2] shows, the visualization mode is formed of a tag cloud on the left and a main 
bookmark network canvas on the right. Several options on the top endow users with the ability to switch 
between different views or filter out the results. 

List: We provide a traditional list view to assist users gradually accommodate to the new interface. The 
list view is also used for evaluation by comparison between the two modes. Similar to the visualization 
mode, the list interface has a tag cloud on the left, and the main content on the right where resources of 
selected tags are listed. Personal and social view separate the local resources and globally popular ones, 
with a switch similar to Fig.^a). 

Bookmarklet: The bookmarklet is a small applet, working as a normal bookmark item but with cus- 
tomized javascript code to provide additional functions beyond simply opening a Web page. The GalViz, 
bookmarklet is an extension of the visualization service providing easy access to the contextual map of the 
current Web page. 
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6 Case Study 



Scenario: A friend recommends the site Engad get . com 



Goal: To learn the content and context of Engadget through the social tagging system, and then annotate it 
with a set of proper tags in the personal bookmark collection. 

Solution: Let us consider how a user accomplishes the task through Delicious and GalViz, respectively: 

(1) Through Delicious: First, the user visits Delicious and searches for "engadget.com". She should 
be able to see top popular tags about Engadget. Second, the user clicks on "Save this site" on the top 
right corner and fills in the pop-up dialog box to tag the bookmark. 

(2) Through GalViz'- While browsing the Engadget site, the user can access GalViz by simply clicking 
the GalViz bookmarklet (Fig. [3^). After choosing "View context visualization" (Fig[3})), he can see the 
contextual information about Engadget. Through the right-click menu, the target site, as the center 
of the visualization, is added into the personal view (Fig. [3}:) with tags customized on the system 
recommendations (Fig. [3}i). The final visualization will be the personal view of Engadget associated 
with user tags and other relevant Web resources (Fig. [3^). 

Users need to type in the required information and read the text in detail to look for proper links in 
Delicious. GalViz provides a more transparent and embedded service through the bookmarklet, and 
visualizes the contextual information in a simple but insightful way. 



7 Preliminary Log Study 

During an evaluation period, we assigned GiveALink users with equal chances to see either the list or the 
visualization mode when they navigated to the bookmark manager. Users are allowed to do any task they 
attend to do. Our log recorded 38,181 actions by 6,310 users. Analysis of the log reveals several advantages 
of the visualization interface. For each mode, a series of continuous clicks is defined as a session. As 
shown in Table [T] the visualization can attract more usage, as there are more sessions in the visualization 
mode (1,192) than in the list view (960). Each session in the visualization mode lasts 172.3 seconds on 
average, 25 seconds shorter than the average session length of the list. With the help of the interactive 
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Table 1: Statistics through log analysis. 



Mode List 



Visualization 



Number of sessions 960 

Time per session (sec) 197.4 

Clicks per session 12.4 

Content-related clicks 57.6% 

Switch to other mode 32.3% 



1,192 
172.3 
17.3 
83.1% 
33.4% 



network visualization, users are shown to interact more with the system during a shorter time period. With 
a reasonable assumption that users start using the GiveAlink bookmark manager with a certain goal and 
leave once the goal is achieved, we can infer that the visualization mode can facilitate user tasks more 
efficiently. Clicks involving tag selection, resource selection and content editing are considered as content- 
related actions. 83.1% of clicks in the visualization mode are content-related, much higher than 57.6% in 
the list mode. The visualization encourages more interactions with the content, as the graph visualization 
simplifies the management operations with an intuitive representation. Finally, the visualization and list 
view have approximately equal chances to lose users to the other mode during usage sessions. 

8 Conclusion and Future Work 

To complement the weaknesses of current social tagging tools, we designed and implemented a new so- 
cial bookmark manager. It visualizes the tripartite relationships in a more accessible and friendly display, 
and incorporates richer contextual information. Our design goals include facilitating annotation manage- 
ment with visualization, providing contextual maps, and highlighting social relationships while avoiding 
information overwhelming. A case study on a common scenario and the system log analysis suggest that 
these goals have been achieved by our design and implementation. GalViz, smoothens the process of ex- 
amining the contextual information and adding new resources; at the same time, users are encouraged to 
interact with the system and explore the information more efficiently. The GalViz social bookmark manager 
(GiveALink . org/collection/show) is part of the GiveALink platform. 

We presented a set of preliminary evaluations. To learn more about the limitations of GalViz and possible 
improvements in future versions, a more thorough and complete evaluation should be considered. As part of 



8 




Bookmarklet Visualization 

For URL: http://www.angadgGt.com/ 

Add this url as my collection with tags ("seperated by whitespace); 



View context visualization 



(b) 



My Bookmarks: Uet 



BED J2s 


63 2cs\ aa abroad 


acadernia a 


ademfc academics acg 


lOmlssion ai a 


ajax album algorithms 


anime ■ anK' -us 


aptitude sou 


abrowser art ascii asp 


baidu bank t 


55 berkeley bibl-ographic 


blbllogr aptiy 
book book 


iriorrenl blacklighi blog 




a browser bl buptase 
■ C# calendar California 


career cat 


<„■■ catalog ceo certi 




3 Chicago -china chine 


Chinese citati 


n classification emu) cnki 




orai.an college color 




mm unity comparison 




aiiinguisiica computer 






corners COUrSfiS CTat* cneditcard 


cryptography CB BK csdn CBS culture 




Oase de Lido .us delicious 


design development aw diet 


dictionary c 


gg digital directory div 


. download dpt ■ ■ 




education email >:""...:■ 




S(l enlerlainmenl gxam 



Display: Personal View 
„, Expand URLs vi 




Settings... 
Global Setti ngjs... 

About Adobe Flash Player 10.3. 183. S... 
I 



(C) 



My Bookmarks: List Qj 



Emission al aid ajax album algorithms 

anime *™ a Hw antiwn* anni^i,™ 



Display: Personal Via w EffflflBM 

kmarks Expand URLs with more tags 



:i v.-ai il 'o tag htipj/faww.engadget.corrj/ {Engadgel) with (separated by iLi:'.£\ 



call abora lion college color 

; community comparison 

lationallinguislics computer 



design development dW die 
dictionary digg digital nSeotorj 

drraz download downloads, dpt d 
e-mail ediior education email or 



academia acade 
anime anna root 



t=s=J ess <=s 



(d) 



ch aa abroad 

-, academics acg 
K album alyorithi 



baidu bank bbs berkeley bibliographic 
bibliography birtorranl MacMghl 
book books browser bt buptsse 



career ydrioor; catalog can 
certification eg Chicago China 
Chinese citation dassifi cation cn 
code collaboration college t 



design development dhi diet 
dictionary digg digital directory div 
dmoz download downloads dpt drese 
e-mail editor education email mH 



Expand JRLs with more tags 



(i) O 

O O O O O 
^ © ® ® (DO 

o o Q c o 9 o o 
o n9o m o 

° o 8 o° n ° o 

^TM // O ® 



Figure 3: Find out the context of the site Engadget . com and add it into the personal collection through 
GalViz- (a) Use GalViz bookmarklet; (b) Choose to see the context; (c) Add it into the personal collection; 
(d) Customize recommended tags; (e) Check the final visualization. 



the future work, we plan to employ Amazon's Mechanical Turk, a crowd-sourcing marketplace, to measure 
the usability of the system with several specifically designed tasks. Close user studies, including face-to-face 
conversations and user behavior observations, are necessary as well for gaining a deeper understanding of 
user requirements. 
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